<template>
  <div class="box">
    <div class="AddBox">
      <button class="addCargoOwner" @click="showDialog('添加合同')">
        <i class="el-icon-plus iconBtn"></i>
        <span>添加合同</span>
      </button>
    </div>
    <div class="list">
      <el-table style="width: 100%" :data="ContractTable">
        <el-table-column align="center" prop="SerialNumber" label="序号">
        </el-table-column>
        <el-table-column prop="contractNumber" label="合同编号">
        </el-table-column>
        <el-table-column align="center" prop="cargoContractName" label="对应货主合同">
        </el-table-column>
        <el-table-column align="center" prop="charging" label="计费标准">
          <template slot-scope="scope">
            <div>
              {{ scope.row.charging + scope.row.chargingUnit }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="settlementPeriod" label="结算账期">
          <template slot-scope="scope">
            <div>
              {{ scope.row.settlementPeriod + scope.row.settlementPeriodUnit }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="contractEndTime" label="合同结束日期">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text" size="small" @click="
                UpdateContractTable(
                  scope.$index,
                  '编辑合同',
                  scope.row.supplierId
                )
                ">编辑</el-button>
              <el-button type="text" size="small" @click="DeleteContractTable(scope.$index)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加合同弹窗 -->
    <el-dialog class="dialog" :title="ContractTitle" :visible.sync="visibleAddBox" width="672px"
      :before-close="handleClose">
      <el-form ref="addContractForm" :model="addContractForm" :rules="addContractRules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="合同编号" prop="contractNumber">
              <el-input v-model="addContractForm.contractNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对应货主合同" prop="supplierCargoContractId">
              <el-select v-model="addContractForm.cargoContractName" filterable :remote="true" placeholder="请输入关键词"
                @change="selectedSupplierCargoContractId($event)" :remote-method="remoteMethod"
                :loading="supplierCargoContractLoading">
                <el-option v-for="item in CargoContractList" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计费标准" prop="charging">
              <el-col :span="14">
                <el-input v-model="addContractForm.charging"></el-input>
              </el-col>
              <el-col :span="2" style="width: 10px; height: 32px"></el-col>
              <!-- 计费单位 -->
              <el-col :span="8">
                <el-select v-model="addContractForm.chargingUnit" placeholder="选择">
                  <el-option v-for="item in WeightArr" :key="item.value" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算周期" prop="settlementPeriod">
              <el-col :span="14">
                <el-input v-model="addContractForm.settlementPeriod"></el-input>
              </el-col>
              <el-col :span="2" style="width: 10px; height: 32px"></el-col>
              <!-- 结算周期单位 -->
              <el-col :span="8">
                <el-select v-model="addContractForm.settlementPeriodUnit" placeholder="选择">
                  <el-option v-for="item in timeArr" :key="item.value" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="发票类型" prop="invoiceType">
              <el-select v-model="addContractForm.invoiceType" placeholder="选择">
                <el-option v-for="item in invoiceArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发票税率" prop="taxRate">
              <el-input v-model="addContractForm.taxRate" class="append_unit">
                <div slot="suffix" style="padding-right: 10px; padding-left: 10px">
                  %
                </div>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同期限" prop="contractPeriod" style="margin-bottom: 0">
              <el-col :span="14">
                <el-input v-model="addContractForm.contractPeriod"></el-input>
              </el-col>
              <el-col :span="2" style="width: 10px; height: 32px"></el-col>
              <el-col :span="8">
                <el-select v-model="addContractForm.contractPeriodUnit" placeholder="选择">
                  <el-option v-for="item in termArr" :key="item.value" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div style="height: 61.99px"></div>
          </el-col>

          <el-col :span="12">
            <el-form-item label="合同开始日期" prop="contractStartTime">
              <el-date-picker v-model="addContractForm.contractStartTime" type="date" placeholder="请选择年/月/日"
                class="data_picker" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同结束日期" prop="contractEndTime">
              <el-date-picker v-model="addContractForm.contractEndTime" type="date" placeholder="请选择年/月/日"
                class="data_picker" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="合同备注" prop="contractRemarks">
              <el-input v-model="addContractForm.contractRemarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传附件" prop="signImage">
              <!-- action	必选参数，上传的地址 -->
              <!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
              <!-- on-remove	文件列表移除文件时的钩子 -->
              <!-- before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 -->
              <!-- limit	最大允许上传个数 -->
              <!-- on-exceed	文件超出个数限制时的钩子 -->
              <!-- file-list	上传的文件列表,  -->
              <el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
                :on-change="handleChange" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed"
                :on-success="onSuccess" :file-list="fileList" :headers="headers">
                <el-button size="small" class="uploadBtn" type="primary">选择文件</el-button>
                <span slot="tip" class="el-upload__tip">
                  仅可上传一份合同文件，支持PDF、JPG等格式
                </span>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="cancelBtn" @click="cancelDialog()">取 消</el-button>
        <el-button class="submitBtn" type="primary" @click="cofime(ContractTitle)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BASEURL from "@/http/BaseUrl";
import httpApi from "@/http";
export default {
  props: {
    contractListVoList: {
      typeof: Array,
      default: () => [],
    },
  },
  data() {
    return {
      visibleAddBox: false,
      ContractTitle: "", //弹窗标题
      ContractTableIndex: "", //合同表格序号
      fileList: [],

      ContractTable: [],
      supplierCargoContractLoading: false, //对应货主合同远程搜索加载 Loading令牌
      CargoContractList: [], //对应货主合同数据列表
      supplierCargoContractIdValue: "",
      /*  addContractForm: {
         contractNumber: "yu12847",  //合同编号
         supplierCargoContractId: "", //对应货主合同名称
         contractName: "合同名称1213", //合同名称
         charging: "10", //计费标准
         chargingUnit: "日",//计费标准单位
         settlementPeriod: "12", //结算周期
         settlementPeriodUnit: "月", //结算周期单位
         taxRate: "9", //发票税率
         contractPeriod: "1",  //合同期限
         contractPeriodUnit: "年",  //合同期限单位
         contractStartTime: "2022-06-10",  //合同开始期限
         contractEndTime: "2023-06-10",  //合同结束期限
         contractRemarks: "合同备注123213", //合同备注
         signImage: "",
         invoiceType: "电子发票",
       }, */
      addContractForm: {
        contractNumber: "", //合同编号
        supplierCargoContractId: "", //对应货主合同名称
        cargoContractName: "", //对应货主合同名称
        contractName: "", //合同名称
        charging: "", //计费标准
        chargingUnit: "", //计费标准单位
        settlementPeriod: "", //结算周期
        settlementPeriodUnit: "", //结算周期单位
        taxRate: "", //发票税率
        contractPeriod: "", //合同期限
        contractPeriodUnit: "", //合同期限单位
        contractStartTime: "", //合同开始期限
        contractEndTime: "", //合同结束期限
        contractRemarks: "", //合同备注
        signImage: "",
        invoiceType: "",
      },
      addContractRules: {
        contractNumber: [
          { required: true, message: "不能为空", trigger: "blur" },
        ], //合同编号
        supplierCargoContractId: [
          { required: true, message: "不能为空", trigger: "change" },
        ], //项目名称
        contractName: [
          { required: true, message: "不能为空", trigger: "blur" },
        ], //合同名称
        charging: [{ required: true, message: "不能为空", trigger: "blur" }], //计费标准
        chargingUnit: [
          { required: true, message: "不能为空", trigger: "change" },
        ], //计费单位
        settlementPeriod: [
          { required: true, message: "不能为空", trigger: "blur" },
        ], //结算周期
        settlementPeriodUnit: [
          { required: true, message: "不能为空", trigger: "change" },
        ], //结算账期单位
        taxRate: [{ required: true, message: "不能为空", trigger: "change" }], //发票税率
        contractPeriod: [
          { required: true, message: "不能为空", trigger: "blur" },
        ], //合同期限
        contractPeriodUnit: [
          { required: true, message: "不能为空", trigger: "change" },
        ], //合同期限单位
        contractStartTime: [
          { required: true, message: "不能为空", trigger: "change" },
        ], //合同开始期限
        contractEndTime: [
          { required: true, message: "不能为空", trigger: "change" },
        ], //合同结束期限
        signImage: [{ required: true, message: "不能为空", trigger: "change" }], //合同附件
        invoiceType: [
          { required: true, message: "不能为空", trigger: "change" },
        ], //发票类型
      },

      headers: {
        Authorization: localStorage.getItem("token"),
      },
      url: BASEURL.TCHYURL + "/file/upload",

      // 计费标准选项
      WeightArr: [
        {
          value: "1",
          label: "车",
        },
        {
          value: "2",
          label: "吨",
        },
        {
          value: "3",
          label: "件",
        },
      ],
      WeightValue: "吨",
      // 结算周期选项
      timeArr: [
        {
          value: "1",
          label: "年",
        },
        {
          value: "2",
          label: "月",
        },
        {
          value: "3",
          label: "日",
        },
      ],
      timeValue: "月",
      // 发票类型选择
      invoiceArr: [
        {
          value: "0",
          label: "无需开票",
        },
        {
          value: "1",
          label: "电子发票",
        },
        {
          value: "3",
          label: "增值税专用发票",
        },
        {
          value: "4",
          label: "普通发票",
        },
      ],
      // 合同期限 选择
      termArr: [
        {
          value: "1",
          label: "年",
        },
        {
          value: "2",
          label: "月",
        },
        {
          value: "3",
          label: "日",
        },
      ],
      termValue: "年",

      supplierCargoContractIdValue: "", //回填远程搜索需要的id
      supplierCargoContractLabel: "", //回填远程搜索label
    };
  },

  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();    //初始值不为空 清空 暂 自己循环清空
      for (var key in this.addContractForm) {
        //key为在遍历对象中的每一个属性的属性名  term[key]为在遍历对象中的每一个key属性名对应的属性值 term为被遍历的对象
        this.addContractForm[key] = ''
      }
      this.fileList = [];
    },
    // 合同 弹窗关闭之前
    handleClose() {
      if (this.ContractTitle == '编辑合同') {
        this.resetForm('addContractForm')


      }else if(this.ContractTitle == '添加合同'){
        sessionStorage.setItem('supplierContract',JSON.stringify(this.addContractForm))
      }
      this.visibleAddBox = false

    },
    // 对应货主合同 选择值变化时
    selectedSupplierCargoContractId(val) {
      // console.log(val);
      // console.log(this.supplierCargoContractIdValue);
      let obj = {};
      obj = this.CargoContractList.find((item) => {
        //这里的就是上面遍历的数据源

        return item.name == val ? item : ""; //筛选出匹配数据
      });
      // console.log('我是', obj);
      this.supplierCargoContractIdValue = obj.id;
      this.supplierCargoContractLabel = obj.label;
      this.addContractForm.supplierCargoContractId = obj.id;
    },

    cancelDialog() {
      this.visibleAddBox = false;
      this.fileList = [];
    },
    cofime(ContractTitle) {
      this.$refs["addContractForm"].validate((valid) => {
        if (valid) {
          this.visibleAddBox = false;
          /*   contractNumber: "",  //合同编号
          supplierCargoContractId: "", //对应货主合同名称
          contractName: "", //合同名称
          charging: "", //计费标准
          chargingUnit: "",//计费标准单位
          settlementPeriod: "", //结算周期
          settlementPeriodUnit: "", //结算周期单位
          taxRate: "", //发票税率
          contractPeriod: "",  //合同期限
          contractPeriodUnit: "",  //合同期限单位
          contractStartTime: "",  //合同开始期限
          contractEndTime: "",  //合同结束期限
          contractRemarks: "", //合同备注
          signImage: "",
          invoiceType: "", */
          // 添加的合同信息一行的数据
          if (ContractTitle == "添加合同") {
            const ContractTableDefault = {
              contractNumber: this.addContractForm.contractNumber, //合同编号
              contractName: this.addContractForm.contractName, //合同名称
              //supplierCargoContractId:this.addContractForm.supplierCargoContractId,  // 对应合同名称
              supplierCargoContractId: this.supplierCargoContractIdValue,
              settlementPeriod: this.addContractForm.settlementPeriod, //结算周期
              earnestMoney: this.addContractForm.earnestMoney, //保证金
              contractEndTime: this.addContractForm.contractEndTime, //合同结束期限
              charging: this.addContractForm.charging, //计费标准
              chargingUnit: this.addContractForm.chargingUnit, //计费标准单位
              settlementPeriodUnit: this.addContractForm.settlementPeriodUnit,
              invoiceType: this.addContractForm.invoiceType,
              signImage: this.addContractForm.signImage,
              contractRemarks: this.addContractForm.contractRemarks,
              contractStartTime: this.addContractForm.contractStartTime,
              contractPeriod: this.addContractForm.contractPeriod,
              taxRate: this.addContractForm.taxRate,
              contractPeriodUnit: this.addContractForm.contractPeriodUnit, //合同期限单位
              cargoContractName: this.addContractForm.cargoContractName,
            };
            // console.log('对应合同名称我添加好了吗', this.addContractForm);

            this.ContractTable.push(
              JSON.parse(JSON.stringify(ContractTableDefault))
            ); //深拷贝 每添加合同信息一条到 合同表格数组里
            this.getSerialNumber();
            // console.log('表格信息', this.ContractTable);
            sessionStorage.setItem(
              "contractInfo",
              JSON.stringify(this.ContractTable)
            );
            //// console.log(sessionStorage.getItem('contractInfo'));
            //处理完后 把合同数据数组传给父组件
            this.$emit("cofime", this.ContractTable, this.ContractTable.length);
            sessionStorage.removeItem('supplierContract')
            this.resetForm('addContractForm')

          } else if (ContractTitle == "编辑合同") {
            // console.log(ContractTitle);
            let i = this.ContractTableIndex;

            const {
              contractNumber,
              contractName,
              supplierCargoContractId,
              contractPeriodUnit,
              settlementPeriodUnit,
              chargingUnit,
              contractRemarks,
              taxRate,
              settlementPeriod,
              earnestMoney,
              contractEndTime,
              charging,
              invoiceType,
              signImage,
              contractStartTime,
              contractPeriod,
              cargoContractName,
            } = this.addContractForm;
            // console.log('4862048',this.addContractForm);
            this.ContractTable[i].contractNumber = contractNumber;
            this.ContractTable[i].contractName = contractName;
            this.ContractTable[i].supplierCargoContractId =
              supplierCargoContractId;
            this.ContractTable[i].contractPeriodUnit = contractPeriodUnit;
            this.ContractTable[i].settlementPeriod = settlementPeriod;
            this.ContractTable[i].earnestMoney = earnestMoney;
            this.ContractTable[i].contractEndTime = contractEndTime;
            this.ContractTable[i].charging = charging;
            this.ContractTable[i].chargingUnit = chargingUnit;
            this.ContractTable[i].settlementPeriodUnit = settlementPeriodUnit;
            this.ContractTable[i].invoiceType = invoiceType;
            this.ContractTable[i].signImage = signImage;
            this.ContractTable[i].contractRemarks = contractRemarks;
            this.ContractTable[i].contractStartTime = contractStartTime;
            this.ContractTable[i].contractPeriod = contractPeriod;
            this.ContractTable[i].taxRate = taxRate;
            this.ContractTable[i].contractPeriodUnit = contractPeriodUnit;

            this.ContractTable[i].cargoContractName = cargoContractName;

            // console.log('bianji', this.ContractTable[i]);
            this.getSerialNumber();
            this.$emit("cofime", this.ContractTable, this.ContractTable.length);
            this.resetForm('addContractForm')
          }
        } else {
          this.$message.error("请填写完合同信息");
          return false;
        }
      });
    },
    // 回填合同表格数据  父组件调用
    getBackfilling() {
      // console.log('父组件调用子组件方法')
      this.ContractTable = this.$options.propsData.contractListVoList;
      this.getSerialNumber("");
      // console.log('拿到回填合同表格数据', this.ContractTable);
    },
    showDialog(title) {
      if(sessionStorage.getItem('supplierContract')!=null){
        this.addContractForm=JSON.parse(sessionStorage.getItem('supplierContract'))
      }

      
      this.ContractTitle = title; //弹窗标题
      this.visibleAddBox = true;
    },
    // 编辑合同信息事件
    UpdateContractTable(index, title) {
      this.CargoContractList.splice(0, {
        id: this.supplierCargoContractIdValue,
        name: this.supplierCargoContractLabel,
      });
      // console.log('加载的数据了', this.CargoContractList);

      this.ContractTitle = title; //弹窗标题
      this.ContractTableIndex = index;
      // console.log(this.ContractTable[index]);
      //this.addContractForm = JSON.parse(JSON.stringify(this.ContractTable[index]))
      this.visibleAddBox = true;

      // console.log('不通请求拿回填', this.ContractTable[index]);
      const {
        supplierCargoContractId,
        contractName,
        charging,
        chargingUnit,
        settlementPeriod,
        contractNumber,
        cargoContractName,
        settlementPeriodUnit,
        taxRate,
        contractPeriod,
        contractPeriodUnit,
        earnestMoney,
        contractStartTime,
        contractEndTime,
        contractRemarks,
        signImage,
        invoiceType,
      } = this.ContractTable[index];
      let localForm = {
        contractNumber: contractNumber,
        cargoContractName: cargoContractName,

        supplierCargoContractId: supplierCargoContractId,
        contractName: contractName,
        charging: charging,
        contractPeriodUnit: contractPeriodUnit,
        earnestMoney: earnestMoney,
        contractEndTime: contractEndTime,
        contractRemarks: contractRemarks,
        signImage: signImage,
        invoiceType: invoiceType,
        chargingUnit: chargingUnit,
        settlementPeriod: settlementPeriod,
        settlementPeriodUnit: settlementPeriodUnit,
        contractPeriod: contractPeriod,
        taxRate: taxRate,
        contractStartTime: contractStartTime,
      };
      //this.supplierCargoContractId=supplierCargoContractId //存ID到data里 编辑确定后取数据id
      this.fileList = [];
      this.fileList.push({ name: "附件", url: signImage });
      this.addContractForm = JSON.parse(JSON.stringify(localForm));
      return;
    },
    //删除合同信息事件
    DeleteContractTable(index) {
      this.ContractTable.splice(index, 1);
      // console.log('删除后', this.ContractTable);
      this.getSerialNumber();
    },
    getSerialNumber() {
      // 前端解决序号  这里不考虑分页 尺寸
      this.ContractTable.forEach((item, i) => {
        let num = i + 1;
        item.SerialNumber = num;
      });
    },
    // 	文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    //    <!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
    handlePreview(file) {
      // console.log(file, '点击文件列表中已上传的文件时的钩子');
      // this.file=file

      if (file.url) {
        window.open(file.url);
      } else {
        window.open(this.fileList[0].url);
      }
    },
    //      <!-- on-exceed	文件超出个数限制时的钩子 -->
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    // before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件上传成功时的钩子
    onSuccess(response, file, fileList) {
      // console.log('文件响应', response);
      this.addContractForm.signImage = response.data.url;
      // console.log(this.addContractForm.signImage);
      this.$refs["addContractForm"].clearValidate("signImage");
    },
    handleChange(file, fileList) { },

    remoteMethod(query) {
      if (query !== "") {
        this.supplierCargoContractLoading = true;

        let params = {
          like: query,
          size: "15",
        };
        httpApi.supplierManagementApi
          .getCorrespondingOwnerContract(params)
          .then((res) => {
            // console.log('对应货主合同列表数据', res);
            this.CargoContractList = res.data.data;
            this.supplierCargoContractLoading = false;
          });
      } else {
        this.CargoContractList = [];
      }
    },
  },
  /*  getBackfilling() {
      // console.log('父组件调用子组件方法')
      this.ContractTable = this.$options.propsData.contractListVoList
      this.getSerialNumber('')
      // console.log('拿到回填合同表格数据', this.ContractTable);

    }, */
  mounted() {
    if (this.$route.query.supplierId) {
      this.getBackfilling();
    }
  },
  watch: {
    getBackfilling(newVal, oldVal) {
      // console.log(`新值：${newVal}`);
      // console.log(`旧值：${oldVal}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.AddBox {
  margin-bottom: 15px;

  .addCargoOwner {
    background-color: #1890ff;
    border-radius: 4px;
    height: 32px;
    width: 105px;
    color: #ffffff;
    font-size: 12px;
    padding: 8px 17px 9px 17px;
    transition: 0.2s;
    cursor: pointer;
    margin-right: 17px;

    .iconBtn {
      margin-right: 7px;
      font-size: 15px;
    }

    &:hover {
      opacity: 0.8;
    }
  }

  // 表头样式
}

.list {
  ::v-deep .el-table__header th {
    background-color: #f5f5f5;
    color: #262626;
    font-size: 12px;
    font-weight: bold;
    text-align: center;

    // 表 body的td
    ::v-deep .el-table__body td {
      color: #666666;
      font-size: 12px;
    }
  }
}

.dialog {

  // 标题
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 19px 20px 17px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 40px 24px;
  }

  //   表格
  ::v-deep .el-form-item__label {
    line-height: 32px;
    font-size: 12px;
    color: #262626;
    padding-top: 4px;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
    padding: 0 10px;
  }

  // 合同期限
  .data_picker {
    width: 100% !important;

    ::v-deep .el-input__inner {
      padding-left: 10px;
      //width: 206px;
    }

    ::v-deep .el-input__prefix {
      display: none;
    }
  }

  // 上传文件
  .upload {
    .uploadBtn {
      width: 80px;
      height: 32px;
      background-color: #1890ff;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
      border-radius: 4px;
      transition: 0.2s;
      margin-right: 12px;
      margin-bottom: 8px;

      &:hover {
        opacity: 0.8;
      }
    }

    .el-upload__tip {
      color: #cccccc;
      font-size: 12px;
    }

    ::v-deep .el-upload-list {
      background-color: #eef3f9;
    }
  }

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }
}

.box {
  height: calc(100vh - 281px);

  background-color: #fff;
}
</style>
